import React from 'react'
import { useState, useEffect } from 'react'
import './WeiBoSeatchList.css'
import axios from 'axios'
import rimg from '../../../static/rd.png';

export default function WeiBoSeatchList() {
  const [wei, setWei] = useState([])
  const [liu, setLiu] = useState('')

  useEffect(() => {
    axios.get('https://api.vvhan.com/api/wbhot').then(res => {
      setWei(res.data.data);
    })
    axios.get('https://api.vvhan.com/api/60s?type=json').then(res => {
      setLiu(res.data.imgUrl);
    })
  }, [])

  return (
    <div className='liubox'>
      <div className='bBox'>
        {
          wei.map((item, index) =>
            <div className='rBox'>
              <div className='zbox'>
                <a href={item.url} target="_blank">
                  {index + 1}.{item.title}
                </a>
              </div>
              <div className='ybox'>
                <img className='img11' src={rimg} alt=''></img>
                <div>{item.hot}</div>
              </div>
            </div>
          )
        }
      </div>
      <div className='iBox' style={{ marginLeft: '20px;' }}>
        <img alt='' src={liu}></img>
      </div>
    </div>
  )
}

